<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
    <script src="sports.js"></script>
</head>

<body>
    <div class="banner">
        <ul class="imgBox clearFix">

            <li style="background-color: red">1</li>
            <li style="background-color: orange">2</li>
            <li style="background-color: green">3</li>
            <li style="background-color: pink">4</li>
            <li style="background-color: yellow">5</li>

        </ul>

        <ol class="pointBox"></ol>

        <div class="leftRightTabs">
            <a href="javascript:;" class="left"> < </a> 
            <a href="javascript:;" class="right"> > </a>
        </div>
    </div>
</body>

</html>
<script src="common.js"></script>
<script>
    // 1、创建常量保存dom对象
    const bannerDom = document.querySelector('.banner');
    const imgBoxDom = document.querySelector('.imgBox');
    const pointBoxDom = document.querySelector('.pointBox');
    const leftRightTabsDom = document.querySelector('.leftRightTabs');
    // 获取banner宽度
    const bannerWidth = bannerDom.clientWidth;
    // index是图片的序号 现在是有7张图
    let index = 1;
    // 保存定时器标识
    let timer;
    // 2、调用函数创建圆点
    createPoint();
    // 3、调用函数创建li标签
    createLiTag();
    // 4、调用函数自动切换图片
    autoPlay();
    // 5、划入划出事件
    bannerDom.addEventListener('mouseover',function(){
        clearInterval(timer);
    })
    bannerDom.addEventListener('mouseout',function(){
        autoPlay();
    })
    // 6、箭头点击事件
    leftRightTabsDom.addEventListener('click',function(event){
        if(event.target.className == 'left'){
            // 点击的上一张
            index--;
            animate(imgBoxDom,{left:- index * bannerWidth},playEnd)
        }else if(event.target.className == 'right'){
            // 点击下一张
            index++;
            animate(imgBoxDom,{left:- index * bannerWidth},playEnd)
        }
    })
    function autoPlay(){
        timer = setInterval(function(){
            index++;
            animate(imgBoxDom,{left:- index * bannerWidth},playEnd)
        },3000)
    }

    // 7、实现小圆点点击
    pointBoxDom.addEventListener('click',function(event){
        if(event.target.nodeName == 'LI'){
            // 点击的是小圆点
            // 获取到当前点击的小圆点的序号
            index = event.target.getAttribute('data-index')-0+1;
            animate(imgBoxDom,{left:- index * bannerWidth},playEnd)
        }
    })
    function playEnd(){
        // 修正index的值  当下一张图片时 如果已经是最后一张图(6) 重新回到第二张图片上
        if(index >= imgBoxDom.children.length-1){
            index = 1;    
        }
        // 上一张图片 可能为-1 修正
        if(index<=0){
            index = imgBoxDom.children.length -2 ;
        }
        imgBoxDom.style.left = - index * bannerWidth + 'px'
        // 处理小圆点的跟随
        for(let i =0;i<pointBoxDom.children.length;i++){
            pointBoxDom.children[i].className = '';
        }
        // 当前显示的图片对应的小圆点增加样式
        pointBoxDom.children[index-1].className = 'active';
    }
    
    
    function createLiTag(){
        // 将第一个li标签进行复制
        let firstLiClone = imgBoxDom.firstElementChild.cloneNode(true);
        // 将最后一个li标签复制
        let lastLiClone = imgBoxDom.lastElementChild.cloneNode(true);
        // 将赋值的第一个li加入到最后位置
        imgBoxDom.appendChild(firstLiClone);
        // 将复制的最后一个li加入到开始位置
        imgBoxDom.insertBefore(lastLiClone,imgBoxDom.firstElementChild);
        // 修正imgBox的宽度
        imgBoxDom.style.width = bannerWidth * imgBoxDom.children.length + 'px';
        // 设置默认显示  真实的第一张图片
        imgBoxDom.style.left = - bannerWidth + 'px'
    }

    // 创建小圆点
    function createPoint(){
        // 根据ul标签中li的个数创建小圆点
        for(let i = 0;i<imgBoxDom.children.length;i++){
            let liDom = document.createElement('li');
            i==0 && (liDom.className = 'active')
            // 增加记录序号
            liDom.setAttribute('data-index',i);
            pointBoxDom.appendChild(liDom)
        }
    }
</script>